<script setup>

import {
  getTemplateMainFile
} from "@/api/document/fileTemplate.js"
import {ref} from 'vue'
import {scrollToTableBottom} from "@/utils/ruoyi.js";
import pageofficeCtrlUtil, {saveWord} from "@/plugins/pageoffice/pageoffice-word-excel.js";
import {dataTagUtil} from "@/plugins/pageoffice/dataTag.js";
import {isNull} from "@/utils/validate.js";
import {getPOHtmlStyle} from "@/plugins/pageoffice/pageoffice-common.js";

const poHtml = ref('')
const dataTagRefs = reactive({
  dataTags: [],
  dataTagForm: {
    dataTagNameForQuery: ''
  },
  dataTagTableData: [],
  dataTagTableRef: null
})
const {dataTags, dataTagForm, dataTagTableData, dataTagTableRef} = toRefs(dataTagRefs)

let templateId = undefined
//正文是否可编辑
const isEdit = ref(false)
//组装控件所需的自定义按钮的参数,
// 数组的第一个元素： 按钮的标题（如果设置为 "-"，表示此按钮是分隔线）；第二个元素： 点击当前按钮时触发的 JavaScript 函数名；第一个元素： 按钮图标的索引；
//组装Word所需的自定义按钮参数
const customButtonsForPO = [
  ["保存", "save", 1],
  ["导入本地文件", "importData", 13],
  ["-", "", 0],
]

onMounted(() => {
  //获取pageoffice客户端传过来的参数
  templateId = pageofficectrl.WindowParams
  getTemplateWordFile()
  //挂载PageOfficeCtrl 控件需要调用的函数，例如控件触发的事件、自定义按钮触发的函数等。
  pageofficeCtrlUtil.jsFunctionMounted(customJSFunctions, customButtonsForPO)
})

function getTemplateWordFile() {
  getTemplateMainFile(templateId).then(result => {
    poHtml.value = result.html
    isEdit.value = result.save
    let mainInitDataTags = isNull(result.mainInitDataTags) ? [] : result.mainInitDataTags
    dataTags.value = mainInitDataTags
    dataTagTableData.value = mainInitDataTags
  })
}

const customJSFunctions = {
  //控件初始化事件，函数名是指定的，不可修改，此处根据实际情况重写OnPageOfficeCtrlInit事件代码
  OnPageOfficeCtrlInit: () => {
    //添加自定义按钮，这些自定义按钮执行的js函数需要在 window.POPageMounted 挂载
    pageofficeCtrlUtil.addCustomButtons(isEdit.value ? customButtonsForPO : null)
  },
  //文档打开后执行的事件
  AfterDocumentOpened: () => {},
  //自定义保存按钮执行的js函数
  save: ()=> {
    //设置保存地址
    const saveFilePage = '/doc/fileTemplate/updateTemplateMainWord/' + templateId
    //执行保存
    saveWord(saveFilePage)
  },
  //导入本地文件
  importData: ()=> {
    pageofficectrl.WordImportDialog()
  },
}

function queryDataTag() {
  let dataTagNameForQuery = dataTagForm.value.dataTagNameForQuery
  if (isNull(dataTagNameForQuery)) {
    dataTagTableData.value = dataTags.value
  } else {
    dataTagTableData.value = dataTags.value.filter((data) => data.tagName.toLowerCase().indexOf(dataTagNameForQuery.toLowerCase()) >=0)
  }
  nextTick(() => {
    scrollToTableBottom(dataTagTableRef)
  })
}

</script>

<template>
  <el-row style="height: 100%">
    <el-col :span="8" class="card-box left-container">
      <el-divider content-position="center">
        <el-text type="danger" size="large">数据标签
          <el-tooltip placement="bottom">
            <template #content>
              <p style="max-width: 300px; word-break: break-all; white-space: normal;">
                公文正文中添加的数据标签，在公文拟稿时，会根据公文详情动态地填充到对应的数据标签中。
              </p>
            </template>
            <el-icon :size="18" color="#f56c6c" style="margin-left: 2px;">  <question-filled /> </el-icon>
          </el-tooltip>
        </el-text>
      </el-divider>
      <el-row>
        <el-form @submit.native.prevent
            :model="dataTagForm"
            ref="dataTagFormRef"
            style="width: 100%">
          <el-form-item>
            <el-input v-model="dataTagForm.dataTagNameForQuery" placeholder="请输入可选数据标签的关键词，进行搜索"
                      type="text"
                      @input="queryDataTag"
                      clearable >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table ref="dataTagTableRef" :data="dataTagTableData" class="table" style="width: 100%;" height="100%"
                  scrollbar-always-on>
          <el-table-column prop="tagName" label="可选数据标签"/>
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.locateDataTag(scope.row.tagName)"
              >
                定位
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.addDataTag(scope.row.tagName)"
              >
                添加
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataTagUtil.deleteDataTag(scope.row.tagName, scope.$index)"
                  v-if="isEdit"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-col>
    <el-col :span="16" class="card-box">
      <el-form method="post">
        <!-- 此div用来加载PageOffice客户端控件 -->
        <div :style="getPOHtmlStyle()" v-html="poHtml"></div>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>
.left-container {
  border-right: #d5dbe4 1px dashed;
  height: auto;
}

.left-container .table {
  border: #d5dbe4 1px solid;
  border-radius: 2px;
}
</style>

